webpack loader file | 您所在的位置:网站首页 › 图片 icon › webpack loader file |
1、什么是loader
webapck的本质是一个模块打包工具, 所以webpack默认只能处理JS文件,不能处理其他文件,用于将其它类型文件转换为webpack能够识别处理模块的工具我们就称之为loader。 2、如何使用loader① 通过npm安装对应的loader。 ② 按照loader作者的要求在webpack进行相关配置。 ③ 使用配置好的loader。 3、webpack-file-loader(打包css,js中的图片、字体图标) (1)fileloader使用fileloader可以打包图片文件。 https://www.webpackjs.com/loaders/file-loader/ ① 安装file-loader npm install --save-dev file-loader② 在webpack.config.js中配置file-loader 打包图片 module.exports={ module:{ //告诉webpack如何处理webpack不能够识别的文件 rules:[ { test:/\.(png|jpg|gif)$/, use:[ { loader:'file-loader', options:{} } ] } ] } } 打包字体图标 { test: /\.(eot|json|svg|ttf|woff|woff2)$/, use: [ { loader: 'file-loader', options: { // 指定打包后文件名称 name: '[name].[ext]', // 指定打包后文件存放目录 outputPath: 'font/', } ] } (2)fileloader的其他配置① 默认情况下fileloader生成的图片名就是文件内容的 MD5 哈希值 可以新增配置:name: "[name].[ext]" ② 默认情况下fileloader会将生成的图片放到dist根目录下面 如果放到指定目录下面, 那么可以新增配置:outputPath: "images/" ③ 如果要将图片托管到其它服务器, 需配置 publicPath: "托管服务器地址" ③ 遇到的坑:file-loader打包图片文件时路径错误输出为[object-module] 在webpack的file-loader配置项里,设置esModule为false。 module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: { esModule: false } } ] } ] } 3.webpack-url-loader(打包css,js中的图片) (1)urlloaderurl-loader 功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL。 (2)urlloader使用https://www.webpackjs.com/loaders/url-loader/ ① 安装urlloader npm install --save-dev url-loader② 配置urlloader /* module: 告诉webpack如何处理webpack不能够识别的文件 * */ module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [ { loader: 'url-loader', options: { limit: 1024 * 100, // 指定打包后文件名称 name: '[name].[ext]', // 指定打包后文件存放目录 outputPath: 'images/', } } ] }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[ext]', }, }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]'), }, }, ] }limit: 指定图片限制的大小 如果被打包的图片超过了限制的大小, 就会将图片保存为一个文件; 如果被打包的图片没有超过限制的大小, 就会将图片转换成base64的字符串。 (3)优势图片比较小的时候直接转换成base64字符串图片, 减少请求次数, 图片比较大的时候由于生成的base64字符串图片也比较大, 就保持原有的图片。 |
CopyRight 2018-2019 实验室设备网 版权所有 |